<!--忘记密码-->
<template>
	<div class="wrap">
		<h3>重置密码</h3>
		<input class="wrap_input1" type="text" v-model='phone'   placeholder="请输入手机号"/>
		<em>⚠ 手机号码不正确,请重新输入️</em>
		<textarea type="text" placeholder="验证码"/></textarea>
		<a href="javascript:;">看不清换一张</a>
		<div class="wrap_input2">
			<input type="text" class="Password" v-model='Password' placeholder="请输入密码(6-20个字符)"/>
			<input type="text" class="SPassword" v-model='SPassword' placeholder="请再次输入密码"/>
			<input type="text" placeholder="手机验证码"/>
			<button class="get">获取验证码</button>
		</div>
			<button class="btn1" @click="Submit">提交</button>	
	</div>
</template>

<script>
	export default{
		data(){
			return {
				phone:'',
				Password:'',
				SPassword:''
			}
		},
		methods:{		
			Submit:function(){
				var pattern = /^[1][3,4,5,7,8][0-9]{9}$/;	
				//手机号为空时
				if(this.phone==""){
				$('.wrap_input1').css('background','pink');
				}else{
				//当输入格式不正确时
				if(!pattern.test(this.phone)){
					$(".wrap em").show(this.phone);
					console.log()
				}else{
					$(".wrap em").hide();
				}
			}
				//输入密码
				//密码为空时
				if(this.Password==''){
					$('.Password').css('background','pink');
				}else{
					//密码在6-20个字符
					if(!(this.Password.length>6 && this.Password.length<20)){
						$('.Password').css('background','aqua');
						console.log(this);
					}
				}
				//再次输入密码时
				//判断与上一个密码是否相同
				if(this.SPassword==''){
					$('.SPassword').css('background','pink');
				}else{
					//密码在6-20个字符,并且与上一个密码框值相同
					if(!(this.SPassword.length>6 && this.SPassword.length<20) && !(this.SPassword==this.Password)){
						$('.SPassword').css('background','aqua');
						console.log(this);
					}
				}
		}
	}
}
</script>

<style scoped>
	.wrap{
		position: relative;
		width: 386px;
		height: 500px;
		background: white;
		border-left: 2px solid darkgray;	
		position: absolute;
		right: 253px;
		top:95px;
	}
	h3{
		height: 55px;
		font-size: 25px;
		font-weight: 300;
		padding-left: 33px;
		/*background: green;*/
	}
	.wrap_input1{
		width: 307px;
		height: 44px;
		line-height: 44px;
		font-size: 17px;
		margin-left: 35px;	
		padding-left: 10px;
		background: #f9f9f9;
		color: #999999;
	}
	/*验证码处*/
	textarea{
		width: 112px;
		height: 44px;
		line-height: 44px;
		font-size: 17px;
		margin-left: 35px;
		padding-left: 10px;
		margin-right: 20px;
		margin-top:30px;
		margin-bottom:17px;
		color: #999999;
		background: #f9f9f9;
	}
	a{
		width: 80px;
		height:34px;
		background: url(../../assets/image/yzm.jpg) no-repeat;
		background-size: 60px 34px;
		padding-left: 70px;
		vertical-align: 36px;
		color: #f4a140;
		font-weight: 100;
	}
	em{
		font-style: normal;
		color: red;
		font-size: 14px;
		margin-left: 36px;
		position: absolute;
		top: 108px;
		left: 0;
		display: none;
	}
	.wrap_input2{
		position: relative;
	}
	.wrap_input2 input{
		width: 307px;
		height: 44px;
		line-height: 44px;
		font-size: 17px;
		margin-left: 35px;
		margin-bottom: 20px;
		padding-left: 10px;
		background: #f9f9f9;
		color: #999999;
	}
	/*下方点击页面*/
	.get{
		width: 100px;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		color: white;
		background: #498e3d;
		position: absolute;
		top: 148px;
		right:35px;
	}
	.btn1{
		width: 323px;
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		color: white;
		margin-left: 34px;
		background: #f08200;
		border-radius:5px ;
		font-weight: 100;
	}
</style>